<template>
  <a-table
    :columns="columns"
    :data-source="data"
    @resizeColumn="handleResizeColumn"
    :pagination="pagination"
    bordered
    class="adjust-table"
    size="middle"
    :rowKey="(record:any) => record.id"
    :loading="isloading"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'operations'">
        <div class="operations-style">
          <div>
            <a-typography-link @click="editFunc(record)"  v-track="'点击用户角色编辑'"
              >编辑</a-typography-link
            >
          </div>
          <div class="margin-left_20">
            <a-popconfirm
              title="是否删除?"
              @confirm="deleteFunc(record.id)"
              v-track="'点击用户角色删除'"
              :getPopupContainer="(triggerNode:any) => {return triggerNode.parentNode}"
            >
              <a>删除</a>
            </a-popconfirm>
          </div>
        </div>
      </template>
    </template>
    <slot></slot>
  </a-table>
</template>

<script lang="ts">
export default {
  name: "RoleManageTable",
};
</script>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import type { TableColumnsType } from "ant-design-vue";
import { defineComponent, ref } from "vue";

const props = defineProps({
  columns: [] as any[],
  data: [] as any[],
  pagination: {} as any,
  isloading: Boolean,
});
const handleResizeColumn = (w: any, col: any) => {
  col.width = w;
};

const emits = defineEmits(["tableChange", "editFunc", "delFunc"]);
// 事件
const handleTableChange = () => {
  console.log("分页、排序、筛选变化时触发");
  emits("tableChange");
};
const editFunc = (record: any) => {
  console.log("编辑事件触发");
  emits("editFunc", record);
};
const deleteFunc = (id: number) => {
  console.log("删除事件触发");
  emits("delFunc", id);
};
</script>
<style lang="less" scoped>
.operations-style {
  display: flex;
  justify-content: center;

  :deep(.ant-popover-buttons) {
    display: flex;
  }
}

.adjust-table {
  :deep(.ant-table-thead) {
    tr {
      th {
        color: #909399 !important;
        font-weight: 500 !important;
        background: #f5f7fa !important;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
</style>